<template>
  <view class="container">
    <view class="box">
      <view class="kong_border"></view>
      <view class="border">
        <view class="border_top flexs2">
          <image class="back_image"
                 src="/static/image/ico_dh_bk@2x.png"
                 mode=""
                 @click="backHandler"></image>
          <view class="topbiao">课程详情</view>
          <view class="text-center">
            <image class="tiwen_image"
                   src="/static/image/dt_sc_no.png"
                   mode=""
                   v-show="true"></image>
            <!-- <image class="tiwen_image"
                   src="../../static/image/dt_jc_sel.png"
                   mode=""
                   v-show="true"></image> -->
          </view>
        </view>
      </view>
      <view class="all_big_box">
        <image class="image_top"
               :src="$serverIp+curriculumDetailList.image"
               mode="widthFix"></image>
        <view class="title_top flexs3">
          <view class="title_list top_border"
                @click="toggle(1)">
            <view class="">概况</view>
            <view class="border_color"
                  v-if="type==1"></view>
          </view>
          <view class="title_list top_border"
                @click="toggle(2)">
            <view class="">历年真题</view>
            <view class="border_color"
                  v-if="type==2"></view>
          </view>
          <view class="title_list top_border"
                @click="toggle(3)">
            <view class="">复习资料</view>
            <view class="border_color"
                  v-if="type==3"></view>
          </view>
          <view class="title_list top_border"
                @click="toggle(4)">
            <view class="">模拟刷题</view>
            <view class="border_color"
                  v-if="type==4"></view>
          </view>
        </view>
        <view class="kong"></view>
        <!-- 概括 -->
        <view class="gaiguo"
              v-if="type==1">
          <view class="top_next">
            <view class="flexs1">
              <view class="kong_color fs"></view>
              <view class="top_xinxi">基本信息</view>
            </view>
            <view class="top_kecheng">课程名称：{{curriculumDetailList.name}}</view>
          </view>
          <view class="jiangyi flexs3">
            <view class="jiang_list">
              <view class="text-center jiangyi_num">{{curriculumDetailList.infomation_num+curriculumDetailList.true_title_num}}</view>
              <view class="jiangyi_center">真题|讲义</view>
            </view>
            <view class="jiang_list">
              <view class="text-center jiangyi_num">{{curriculumDetailList.question_num}}</view>
              <!-- <view class="text-center jiangyi_num">1</view> -->
              <view class="jiangyi_center">模考|刷题</view>
            </view>
            <view class="jiang_list">
              <view class="text-center jiangyi_num">{{curriculumDetailList.buy_num}}</view>
              <view class="jiangyi_center">学习人数</view>
            </view>
          </view>
          <view class="student">
            <view class="flexs1 color">
              <view class="student_name">最新学员</view>
              <view class="student_right1 flexs1">
                <image class="avator"
                       src=""
                       mode=""></image>
              </view>
            </view>
            <view class="flexs1 color">
              <view class="student_name">优惠价格</view>
              <view class="student_right">
                <view>
                  <text class="student_size">￥</text>
                  <block>
                    <text class="student_money">{{parseInt(curriculumDetailList.now_price)}}</text>
                  </block>
                  <block>
                    <!-- <text class="student_ren"></text> -->
                    <text class="student_moneyhui">￥{{parseInt(curriculumDetailList.original_price)}}</text>
                  </block>
                </view>
                <view class="student_vip">VIP:￥{{curriculumDetailList.discount_price}}</view>
              </view>
            </view>
            <view class="student_list flexs1 color">
              <view class="student_name">购买说明</view>
              <view class=" student_center flexs1">{{curriculumDetailList.buy_explain}}</view>
            </view>
            <view class="student_list flexs1 color">
              <view class="student_name">提分利器</view>
              <view class=" student_center flexs1">{{curriculumDetailList.raise_score}}</view>
            </view>
            <view class="student_list flexs1 color">
              <view class="student_name">复习时长</view>
              <view class=" student_center border_nun flexs1">{{curriculumDetailList.review_time}}</view>
            </view>
          </view>
          <view class="kong"></view>
          <view class="mingxi">
            <view class="flexs1">
              <view class="kong_color fs"></view>
              <view class="top_xinxi">内容明细</view>
            </view>
            <view class="new_box"
                  v-html="curriculumDetailList.content">

            </view>
          </view>
          <view class="kong"></view>
          <view class="mubiao">
            <view class="flexs1">
              <view class="kong_color fs"></view>
              <view class="top_xinxi">学习目标</view>
            </view>
            <view class="mubiao_text"
                  v-html="curriculumDetailList.study_target">
              <view></view>

            </view>
          </view>
          <view class="kong"></view>
          <view class="pingjia">
            <view class="flexs2">
              <view class="flexs1">
                <view class="kong_color fs"></view>
                <view class="top_xinxi">学员评价({{evaluateList.length}})</view>
              </view>
              <view class="flexs1"
                    style="margin-top: 30rpx;">
                <view class="pingjia_more">查看更多</view>
                <image class="image_next"
                       src="../../static/image/grzx_ico_jr_hui@2x.png"
                       mode=""></image>
              </view>
            </view>
            <view class="pingjia_list"
                  v-if="evaluateList.length!=0">
              <view class="pingjia_top flexs1">
                <image src="../../static/image/gexx_img_mrtx@2x.png"
                       mode=""></image>
                <view class="">
                  <view class="pingjia_user">{{5767634665}}</view>
                  <view class="pingjia_minut">{{76876}}</view>
                </view>
              </view>
              <view class="pingjia_center">{{532543}}</view>
            </view>
          </view>
        </view>
        <!-- 历年真题 -->
        <view class="zhen_box"
              v-if="type==2">
          <view class="zhen_list flexs1"
                v-for="item in curriculumDetailList.true_title"
                :key="item.id">
            <view class="zhen_center">{{item.name}}</view>
            <image class="zhen_xiazai"
                   src="../../static/image/fxzl_ico_xz@2x.png"
                   mode=""></image>
          </view>
        </view>
        <!-- 复习资料 -->
        <view class="zhen_box"
              v-if="type==3">
          <view class="zhen_list flexs1"
                v-for="item in curriculumDetailList.infomation"
                :key="item.id">

            <view class="zhen_center">{{item.name}}</view>
            <image class="zhen_xiazai"
                   src="../../static/image/fxzl_ico_xz@2x.png"
                   mode=""></image>
          </view>
        </view>
        <!-- 模拟刷题 -->
        <view class="zhen_box"
              v-if="type==4">
          <view class="zhen_list flexs1"
                v-for="item in curriculumDetailList.question"
                :key="item.id">

            <view class="zhen_center">{{item.name}}</view>
            <image class="zhen_xiazai"
                   src="../../static/image/mkst_ico_bj@2x.png"
                   mode=""></image>
          </view>
        </view>

        <view class="kongs_border"></view>
        <view class="bottom_last flexs1">
          <view class=" text-center"
                @click="evaluation(curriculumDetailList.is_buy)">
            <image class="pingjia_image"
                   src="../../static/image/mqpj_ico_pj_h@2x.png"
                   mode=""></image>
            <view class="">评价</view>
          </view>
          <view class="bottom_ping text-center"
                @click="totiwen">
            <image class="tiwen_image"
                   src="../../static/image/mqpj_ico_tw@2x.png"
                   mode=""></image>
            <view class="">提问</view>
          </view>
          <view class="butns flexs"
                @click="togoumai">立即购买</view>
        </view>
        <!-- 课程评价 -->
        <view class="cu-modal"
              :class="dialogVisible?'show':''">
          <view class="cu-dialog"
                v-if="dialogVisible">
            <view class="model_name">课程评价</view>
            <view class="mode_center  flexs3">
              <view class="mode_list flexs model_border_list">
                <image class="model_haop"
                       src="../../static/image/qbpj_ico_hp@2x.png"
                       mode=""></image>
                <view class="model_texth">好评</view>
              </view>
              <view class="mode_list flexs model_border_list">
                <image class="model_haop"
                       src="../../static/image/kcxq_ico_zp@2x.png"
                       mode=""></image>
                <view class="model_texth">中评</view>
              </view>
              <view class="mode_list flexs model_border_list">
                <image class="model_haop"
                       src="../../static/image/kcxq_ico_cp@2x.png"
                       mode=""></image>
                <view class="model_texth">差评</view>
              </view>
            </view>

            <textarea class="input_model"
                      placeholder-class="model_place"
                      placeholder="输入课程评价" />
            <view class="model_butns flexs ">确认提交</view>
            <image class="model_deleter"
                   src="../../static/image/ico_tc_gb_big@2x.png"
                   mode=""></image>
          </view>
        </view>
        <view class="cu-modal"
              :class="isbuystatus?'show':''">
          <view class="cu-dialog"
                v-if="isbuystatus">
            <view class="model_name">提示</view>
            <view class="model_rantext">
              您还未报名该课程，无法评价。
            </view>
            <view class="model_butns flexs "
                  @click="stupid">确定</view>
            <!-- <image v-if="isbuystatus" @click="stupid" 
						class="model_deleter" src="../../static/image/ico_tc_gb_big@2x.png" mode=""></image> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      curriculumDetailList: {},
      evaluateList: [],
      type: 1,
      isbuystatus: false,
      dialogVisible: false,
      id: null
    }
  },
  onLoad(options) {
    console.log(options)
    this.id = options.id
    this.getCurriculumDetailList(options.id)
    this.getCurriculumEvaluateList(options.id)
  },
  methods: {
    //order/create
    async togoumai() {
      const { data } = await this.$http.post('/order/create', { type: 1, q_id: '', c_id: this.id, a_id: '' })
      console.log(data)
      if (data.code == 1) {
        uni.navigateTo({
          url: `paycenter?orderid=${data.data.id}&type=${this.curriculumDetailList.type}&id=${this.id}`
        })
      }
    },
    totiwen() {
      uni.navigateTo({
        url: 'tiwen?id=' + this.id
      })
    },
    stupid() {
      this.isbuystatus = false
    },

    evaluation(num) {
      if (num == '0') {
        this.isbuystatus = true
      } else {
        // console.log(222)
        this.showDialog()
      }
    },
    // 取消
    showDialog() {
      this.dialogVisible = !this.dialogVisible
    },
    toggle(type) {
      this.type = type
    },

    //Curriculum/detail
    async getCurriculumDetailList(id) {
      const { data } = await this.$http.post('/Curriculum/detail', { c_id: id })
      console.log(data)
      this.curriculumDetailList = data.data
      // this.now_price = parseInt(this.curriculumDetailList.now_price)
    },
    //Curriculum/evaluate_list
    async getCurriculumEvaluateList(id) {
      const { data } = await this.$http.post('/Curriculum/evaluate_list', { page: 1, pageSize: 10, c_id: id, level: 0 })
      console.log(data)
      this.evaluateList = data.data
    },
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style>
.cu-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  -webkit-transform: scale(1.185);
  transform: scale(1.185);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
  /* padding-bottom: 20rpx; */
}

.cu-modal.show {
  width: 750rpx;
  height: 100vh;
  padding-top: 70%;
  padding-left: 12%;
  opacity: 1;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}
.fs {
  margin-top: 43rpx;
}
.color {
  height: 105rpx;
  line-height: 105rpx;
}

.flexs1 {
  display: flex;
  justify-content: space-between;
}
.flexs2 {
  display: flex;
  justify-content: space-between;
}
.flexs3 {
  display: flex;
  justify-content: space-around;
}
page {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  overflow-x: hidden;
}
.kong_border {
  width: 100%;
  height: var(--status-bar-height);
  background-color: #ffffff;
}
.topbiao {
  font-size: 36rpx;
  color: #333333;
}

.nothing {
  margin-top: 200rpx;
}

.nothing image {
  width: 354rpx;
  height: 253rpx;
}

.text_no {
  color: #666666;
  font-size: 26rpx;
  margin-top: 15rpx;
}

.border_top {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f5f5f5;
}

.back_image {
  width: 20rpx;
  height: 36rpx;
  /* vertical-align: middle; */
  margin-top: 30rpx;
}

.tiwen_image {
  width: 36rpx;
  height: 36rpx;
}
.tiwen_text {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.box {
  width: 100%;
  height: 100vh;
  color: #333333;
  overflow: hidden;
}
.all_big_box {
  width: 100%;
  height: calc(100% - 100rpx);
  overflow-y: auto;
}
.gaiguo {
  width: 100%;
  height: auto;
  /* margin-top: -90rpx; */
  background-color: #ffffff;
}
/* 历年真题 */
.zhen_box {
  width: 100%;
  height: auto;
  background-color: #ffffff;
}
.zhen_list {
  width: 690rpx;
  height: 100rpx;
  /* line-height: 100rpx; */
  border-bottom: solid 1rpx #f5f5f5;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 30rpx;
  position: relative;
}
.zhen_title {
  width: auto;
  padding: 0 10rpx;
  height: 36rpx;

  background: #fff0ef;
  border-radius: 4rpx;
  color: #ff3b30;
  font-size: 22rpx;
}
.zhen_center {
  width: 460rpx;
  height: 40rpx;
  font-size: 28rpx;
  color: #333333;
  margin-left: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
}
.zhen_xiazai {
  width: 27rpx;
  height: 26rpx;
  position: absolute;
  right: 42rpx;
}
/* 课程评价 */
.model_haop {
  width: 20rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.model_deleter {
  width: 60rpx;
  height: 60rpx;
  z-index: 9999;
  position: fixed;
  margin-top: 120rpx;
  margin-left: -30rpx;
}
.model_rantext {
  width: 570rpx;
  line-height: 100rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 0rx 0rpx;
  margin: 0 auto;
}
.input_model {
  width: 510rpx;
  height: 130rpx;
  background: #f2f2f2;
  margin: 0 auto;
  text-align: left;
  padding-left: 20rpx;
  padding-top: 10rpx;
  font-size: 28rpx;
}
.model_place {
  font-size: 26rpx;
  color: #999999;
}
.mode_center {
  height: 100rpx;
  padding: 0 30rpx;
}
.model_butns {
  width: 300rpx;
  margin: auto;
  /* padding-bottom: 20rpx; */
  margin-top: 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #ffdd47;
  border-radius: 6rpx;
  font-size: 26rpx;
  color: #333333;
  /* margin: 30rpx auto 0; */
}
.mode_list {
  width: 110rpx;
  height: 44rpx;
  border: 1px solid #cccccc;
  border-radius: 6rpx;
}

.model_border_list {
  border: 1px solid #ffdd47;
  background: #fffae6;
  border-radius: 6rpx;
}

.model_texth {
  font-size: 26rpx;
}

.model_name {
  width: 100%;
  line-height: 80rpx;
  font-size: 30rpx;
  background: #f5f5f5;
  font-size: bold;
}

/* pingjia */
.haoping_image {
  width: 20rpx;
  height: 26rpx;
  margin-right: 10rpx;
}

/* last */
.pingjia_image {
  width: 40rpx;
  height: 44rpx;
}

.bottom_last {
  width: 100%;
  height: 100rpx;
  padding-left: 58rpx;
  font-size: 24rpx;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-color: #ffffff;
}

.bottom_ping {
  margin: 0 40rpx;
}

.tiwen_image {
  width: 44rpx;
  height: 44rpx;
}

.kongs_border {
  width: 100%;
  height: 130rpx;
  /* #ifdef APP-PLUS */
  height: 190rpx;
  /* #endif */
  background-color: #f5f5f5;
}

.butns {
  width: 484rpx;
  height: 70rpx;
  background: #ffdd47;
  border-radius: 10rpx;
  font-size: 30rpx;
  line-height: 70rpx;
  text-align: center;
}

/* pingjia */
.pingjia {
  width: 100%;
  padding: 0rpx 30rpx;
  height: auto;
  padding-bottom: 30rpx;
}

.pingjia_list {
  width: 100%;
  margin-top: 10rpx;
}

.pingjia_center {
  font-size: 28rpx;
}

.pingjia_user {
  font-size: 30rpx;
}

.pingjia_minut {
  font-size: 24rpx;
  color: #999999;
}

.image_next {
  width: 12rpx;
  height: 22rpx;
  /* vertical-align: middle; */
  margin-top: 5rpx;
}

.pingjia_more {
  color: #666666;
  font-size: 22rpx;
  margin-right: 10rpx;
}

.pingjia_top {
  width: 100%;
  height: 100rpx;
}

.pingjia_top image {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

/* mubiao */
.mubiao {
  width: 100%;
  padding: 0rpx 30rpx;
  height: auto;
  padding-bottom: 30rpx;
}

.mubiao_text {
  font-size: 26rpx;
}

/* mingxi */
.mingxi {
  width: 100%;
  padding: 0rpx 30rpx;
  height: auto;
  padding-bottom: 30rpx;
}

.border_red {
  width: 690rpx;
  height: 160rpx;
  margin: 20rpx auto 0;
  border: solid 1rpx red;
}

/* student */
.student_size {
  font-size: 24rpx;
  color: #ff3b30;
}

.student_list {
  height: 90rpx;
}

.student_money {
  font-size: 34rpx;
  color: #ff3b30;
}

.student_ren {
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
}

.student_moneyhui {
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
  margin-left: 6rpx;
}

.student_vip {
  width: auto;
  height: 40rpx;
  padding: 0 10rpx;
  background: #ffe7e6;
  border-radius: 6rpx;
  color: #ff3b30;
  font-size: 26rpx;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}

.title_top {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
}

.kong {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}

.image_top {
  width: 100%;
  height: 300rpx;
}

.title_list {
  font-size: 30rpx;
}

.border_color {
  width: 60rpx;
  height: 4rpx;
  background-color: #ffdd47;
  border-radius: 2rpx;
  margin: 0 auto;
  margin-top: -15rpx;
}

.top_border {
  font-weight: bold;
}

.kong_color {
  width: 4rpx;
  height: 20rpx;
  border-radius: 20rpx;
  background-color: #ffdd47;
  margin-right: 10rpx;
  /* position: absolute;
  top: 0rpx;
  left: 0rpx; */
}

.top_xinxi {
  width: 100%;
  line-height: 50rpx;
  font-size: 34rpx;
  margin-top: 30rpx;
}

.top_kecheng {
  width: 100%;
  line-height: 80rpx;
  font-size: 28rpx;
}

.top_next {
  padding: 0 30rpx;
}

.jiangyi {
  width: 650rpx;
  height: 140rpx;
  /* line-height: 140rpx; */
  background: #ffffff;
  box-shadow: 0px 2rpx 10px 0px rgba(15, 11, 2, 0.13);
  border-radius: 10rpx;
  margin: 0 auto;
}
.jiang_list {
  /* height: 140rpx;
  line-height: 140rpx; */
  margin-top: 30rpx;
  text-align: center;
}

.jiangyi_num {
  line-height: 42rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  color: #ff3b30;
}

.jiangyi_center {
  line-height: 42rpx;
  color: #666666;
  font-size: 26rpx;
}

.avator {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
  border-radius: 50%;
}

.border_nun {
  border-bottom: none !important;
}

.student_right {
  width: 500rpx;
  height: 105rpx;

  border-bottom: solid 1rpx #e5e5e5;
  display: flex;
  /* justify-content: flex-start; */
  justify-content: space-between;
  align-items: center;
}
.student_right1 {
  width: 500rpx;
  height: 105rpx;

  border-bottom: solid 1rpx #e5e5e5;
}

.student_center {
  width: 500rpx;
  height: 100%;
  color: #333333;
  font-size: 24rpx;
  border-bottom: solid 1rpx #e5e5e5;
}

.student_name {
  width: 120rpx;
  font-size: 24rpx;
  color: #666666;
  margin-right: 15rpx;
}

.student {
  width: 650rpx;
  height: 475rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 10px 0rpx rgba(15, 11, 2, 0.13);
  border-radius: 10rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

/* 弹框样式 */
.btns {
  width: 100%;
  height: 120rpx;
  letter-spacing: 3rpx;
  font-size: 30rpx;
  border-top: 1px solid #e8e8e8;
}

.btnsa {
  width: 50%;
  padding: 36rpx 0;
  background-color: white;
}

.btnsa1 {
  border-right: 1px solid #e8e8e8;
  color: #999999;
}

.padding-xl {
  background-color: white;
  padding: 70rpx 0;
  letter-spacing: 3rpx;
  font-size: 30rpx;
  color: #333333;
}

.cu-dialog {
  width: 570rpx;
  height: auto;
  background-color: #ffffff;
  border-radius: 10rpx;
  /* border:1rpx solid red; */
}

.color {
  color: #fbce59;
}
</style>
